<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-11 15:26:59
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @LastEditTime: 2024-08-29 18:52:45
 * @FilePath: \jzjypc4.0\src\views\PersonalCenter\PersonalMsg\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 个人中心/我的活动 -->
  <div id="container">
    <div class="content">
      <div class="top">
        <span></span>
        <h3>我的订单</h3>
      </div>
      <!-- <div class="duihuan" @click="dialogVisible_duihuan = true">
        <img src="../../../assets/img/orderTips.png" alt="">
        <p>输入兑换码</p>
      </div> -->
      <div class="box">
        <div class="taps">
          <div
            class="all"
            :class="{ choseTap: tapRadio == 0 }"
            @click="chosetoZt(0)"
          >
            <h3>全部</h3>
            <span></span>
          </div>
          <div class="fenge"></div>
          <div
            class="waitMoney"
            :class="{ choseTap: tapRadio == 1 }"
            @click="chosetoZt(1)"
          >
            <h3>待付款</h3>
            <span></span>
          </div>
          <div class="fenge"></div>
          <div
            class="finish"
            :class="{ choseTap: tapRadio == 5 }"
            @click="chosetoZt(5)"
          >
            <h3>已完成</h3>
            <span></span>
          </div>
          <div class="fenge"></div>
          <!-- <div
            class="finish"
            :class="{ choseTap: tapRadio == 4 }"
            @click="chosetoZt(4)"
          >
            <h3>已取消</h3>
            <span></span>
          </div> -->
          <div
            class="finish"
            :class="{ choseTap: tapRadio == 7 }"
            @click="chosetoZt(7)"
          >
            <h3>已退款</h3>
            <span></span>
          </div>
        </div>
        <!-- 课件资源收藏列表 -->
        <div class="orderLists">
          <!-- <div class="caozuo">
            <div class="duoxuan">
              <span v-if="!choseAll" @click="choseAllOrder"
                ><img src="../../../assets/img/nochose.png"
              /></span>
              <span v-if="choseAll" @click="choseNoOrder"
                ><img src="../../../assets/img/chose.png"
              /></span>
              全选
            </div>
            <div class="cancelsc" >
              <i class="el-icon-delete"></i>
              <span>批量删除</span>
            </div>
          </div> -->
          <div class="orderBox" v-for="item in orderLists" :key="item.id">
            <div class="boxtop">
              <div class="left">
                <h3>
                  {{ timeStamp2String(item.lists[0].create_time * 1000, 2) }}
                </h3>
                <span>订单号：{{ item.lists[0].numbers }}</span>
              </div>
              <div class="right" @click="cancelOrder(item.id)" v-if="item.pay_time_limit < 0 && item.status == 1">
                <img src="../../../assets/img/order_del.png" />
              </div>
            </div>
            <div class="orderDetails">
              <div class="pic" @click="goyuyue(item.lists[0].goods_id,item.is_all_gm,item.week_ids,item.status)">
                <img :src="item.lists[0].file_url" />
              </div>
              <div class="title" @click="goyuyue(item.lists[0].goods_id,item.is_all_gm,item.week_ids,item.status)">
                <p>{{ item.lists[0].goods_title }}</p>
                <el-tooltip placement="right" effect="light">
                  <div slot="content"><div class="tooltips" style="max-width:500px;color:#666">{{item.info_title}}</div></div>
                  <span>{{item.info_title}}</span>
                </el-tooltip>
                <div class="zengpin" v-show="item.lists[0].zp_title && item.is_all_gm == 1">
                  赠品：{{item.lists[0].zp_title}}
                </div>
              </div>
              <div class="money">￥{{ item.all_price }}</div>
              
              <!-- <div class="zhuangtai" v-if="item.pay_time_limit < 0 && item.status == 1">已过期</div> -->
              <div class="zhuangtai" >{{ type(item.status) }}</div>
              <div class="xqkp">
                <p @click="godetails(item.id,item.info_title)">订单详情</p>
                <p @click="godetailskp(item.id)" style="margin-top: 10px;" v-if="item.status == 1 || (item.status == 5 && item.pay_time > 0)">申请开票</p>
              </div>
              
              <!-- <div class="dosome" v-if="item.pay_time_limit < 0 && item.status == 1">
                <div
                  class="gostudy zhifu"
                  v-if="item.status == 1"
                  style="background:#CCC"
                >
                  去支付
                </div>
                <div class="gostudy zhanwei" style="border:none" v-if="item.status != 1"></div>
                <div
                  class="gostudy"
                  style="background:#CCC;color:#FFF"
                >
                  去学习
                </div>
              </div> -->
              <div class="dosome">
                <div
                  class="gostudy zhifu"
                  v-if="item.status == 1"
                  @click="payIt(item.id)"
                >
                  去支付
                </div>
                <!-- <div class="gostudy zhanwei" style="border:none" v-if="item.status != 1"></div> -->
                <div
                  class="gostudy"
                  v-if="item.status == 5"
                  @click="gostudy(item.lists[0].goods_id,item.lists[0].goodsyf_title)"
                  style="border: 1px solid #08a579;"
                >
                  去学习
                </div>
                <!-- <div class="zftime" v-if="item.status == 1">
                  剩余支付时间：{{ parseInt(item.pay_time_limit/(24 * 60 * 60)) }}天{{ parseInt((item.pay_time_limit% (24 * 60 * 60)) / (60 * 60)) }}时{{ parseInt((item.pay_time_limit % (60 * 60)) / 60)}}分{{ parseInt(parseInt(item.pay_time_limit %60)) }}秒
                </div> -->
              </div>
            </div>
          </div>
        </div>
        <!-- 无订单状态 -->
        <div class="nothing" v-if="nothingShow">
          <img src="../../../assets/img/nothing.png" alt="" />
        </div>
        <!-- 分页 -->
        <div class="page1" v-if="!nothingShow">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            background
            :page-sizes="[5, 10]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="retCounts"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 兑换码输入解锁框 -->
      <div class="duihuanBox">
        <el-dialog
          :visible.sync="dialogVisible_duihuan"
          width="360px"
          :before-close="duihuanClose"
          custom-class="duihuan"
        >
          <h2>兑换码解锁</h2>
          <div class="shuru">
            <input type="text" v-model="jsm" placeholder="请输入解锁兑换码" />
          </div>
          <div class="sureJs" @click="jsmJs">确认解锁</div>
        </el-dialog>
      </div>
      <!-- 支付二维码 -->
      <div class="duihuanBoxzf">
        <el-dialog
          :visible.sync="dialogVisible_zhifu"
          width="360px"
          :before-close="zhifuClose"
          custom-class="duihuan"
        >
          <h2>使用微信扫码支付</h2>
          <img :src="zfevm" alt="">
        </el-dialog>
      </div>
      <!-- 申请开票框 -->
      <div class="kpBox">
        <el-dialog
          :visible.sync="kaipiaoShow"
          width="540px"
          custom-class="duihuan1"
        >
          <h2>申请开票</h2>
          <div class="kpContent">
            <div class="type">
              <div class="left">发票类型</div>
              <div class="right">
                <div class="type1">
                  <img
                    src="../../../assets/img/images/floting_nochose.png"
                    v-show="kptype == 2"
                    @click="kptype = 1"
                  />
                  <img
                    src="../../../assets/img/images/floting_chosed.png"
                    v-show="kptype == 1"
                    @click="kptype = 2"
                  />
                  <p>电子发票</p>
                </div>
                <div class="type1">
                  <img
                    src="../../../assets/img/images/floting_nochose.png"
                    v-show="kptype == 1"
                    @click="kptype = 2"
                  />
                  <img
                    src="../../../assets/img/images/floting_chosed.png"
                    v-show="kptype == 2"
                    @click="kptype = 1"
                  />
                  <p>纸质发票</p>
                </div>
              </div>
            </div>
            <div class="type">
              <div class="left">发票内容</div>
              <div class="right">
                <p>课程</p>
              </div>
            </div>
            <div class="type">
              <div class="left">抬头类型</div>
              <div class="right">
                <div class="type1">
                  <img
                    src="../../../assets/img/images/floting_nochose.png"
                    v-show="title_type == 2"
                    @click="title_type = 1"
                  />
                  <img
                    src="../../../assets/img/images/floting_chosed.png"
                    v-show="title_type == 1"
                    @click="title_type = 2"
                  />
                  <p>个人</p>
                </div>
                <div class="type1">
                  <img
                    src="../../../assets/img/images/floting_nochose.png"
                    v-show="title_type == 1"
                    @click="title_type = 2"
                  />
                  <img
                    src="../../../assets/img/images/floting_chosed.png"
                    v-show="title_type == 2"
                    @click="title_type = 1"
                  />
                  <p>单位</p>
                </div>
              </div>
            </div>
            <div class="type" v-show="title_type == 2">
              <div class="left">抬头名称</div>
              <div class="right">
                <input type="text" v-model="kptitle" placeholder="请输入开票抬头" />
              </div>
            </div>
            <div class="type" v-show="title_type == 2">
              <div class="left">税号</div>
              <div class="right">
                <input type="text" v-model="taxnumber" placeholder="请输入单位税号" />
              </div>
            </div>
            <div class="type" v-show="kptype == 2">
              <div class="left">收货人名称</div>
              <div class="right">
                <input type="text" v-model="name" placeholder="请输入收货人名称" />
              </div>
            </div>
            <div class="type" v-show="title_type == 1">
              <div class="left">身份证号</div>
              <div class="right">
                <input type="text" v-model="sfzh" placeholder="请输入身份证号" />
              </div>
            </div>
            <div class="type">
              <div class="left">申请时间</div>
              <div class="right">
                <p>{{ timeStamp2String(new Date(), 7) }}</p>
              </div>
            </div>
            <div class="type">
              <div class="left">联系电话</div>
              <div class="right">
                <p><input type="text" v-model="phone" placeholder="请输入您联系方式" /></p>
              </div>
            </div>
            <div class="type" v-show="kptype == 1">
              <div class="left">邮箱（电子发票填写）</div>
              <div class="right">
                <p><input type="text" v-model="email" placeholder="请输入您的邮箱" /></p>
              </div>
            </div>
            <div class="type" v-show="kptype == 2">
              <div class="left">收货地址（纸质发票填写）</div>
              <div class="right">
                <p><input type="text" v-model="address" placeholder="请输入您的地址" /></p>
              </div>
            </div>
          </div>
          <p class="tips">
            Tips：发票将在财务审核通过后的<span>1-2</span>个工作日内发送至您的邮箱
          </p>
          <div class="submit" @click="submit">提交申请</div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { timeStamp2String } from "../../../utils/time";
import { list_orders,delete_orders,getxcxewm,info_goods,info_orders,askordersfp,orderspay } from "../../../api/http";
export default {
  name: "changeClass",
  components: {},
  data() {
    return {
      timeStamp2String,
      nianji_id: "", //当前年级id
      activeList: [], //我的活动列表
      currentPage: 1,

      jyjxtype_id: 401, //教研或者教学
      page: 1, //页数
      page_size: 5, //每页数
      retCounts: 0, //总数据数
      nothingShow: false, //空图的显示隐藏
      value: "", //搜索内容
      fenlei: [], //分类列表
      fl_id: 0, //分类id
      leixing: "全部",
      kejianLists: [], //资源列表
      choseAll: false, //是否开启多选功能
      choseList: [], //选中的订单列表
      from_int: 0,
      dialogVisible: false, //分享弹窗多个
      fxid: [], //分享列表的id
      fxevm: "", //分享二维码
      kemu_id: "", //科目id
      kejianversions_id: "", //版本id

      tapRadio: 0, //当前tap值
      status: "", //订单状态
      orderLists: [], //订单列表

      dialogVisible_duihuan: false, //兑换码弹窗展示
      jsm: "", //解锁码兑换码
      acDjsTimer:'',//支付倒计时

      zfevm:'',//支付二维码
      dialogVisible_zhifu:false,//支付二维码展示

      //申请开票弹窗
      id:'',//订单id
      title: "", //包名称
      kt_account: "", //开通账号
      kaipiaoShow: false, //开票弹窗展示
      kptype: 1, //1.电子发票, 2.纸质发票
      title_type: 1, //抬头类型
      sfzh:'',//身份证号
      taxnumber: "", //税号
      name: "", //收货人名称
      phone: "", //联系方式
      address: "", //收货地址
      email:'',//邮箱地址
      kptitle:'',//抬头内容

      zfTimer:null,//支付状态判断倒计时

      pay_price:'',//实际支付价格
      pay_time:'',//支付时间
    };
  },
  created() {
    this.getOrderLists(); //获取订单列表
  },
  beforeDestroy() {
    clearInterval(this.acDjsTimer);
    this.acDjsTimer = null;

    console.log(this.zfTimer)
    clearInterval(this.zfTimer)
    this.zfTimer = null
  },
  methods: {
    //获取订单列表
    getOrderLists() {
      clearInterval(this.acDjsTimer);
      this.acDjsTimer = null;
      list_orders({
        md5key: localStorage.getItem("md5key"),
        status: this.status,
        page:this.page,
        page_size:this.page_size,
      }).then((res) => {
        this.orderLists = res.retRes;
        console.log(this.orderLists)
        this.retCounts = res.retCounts;
        this.acDjsTimer = setInterval(() => {
          this.orderLists.forEach(item => {
            if(item.pay_time_limit >0){
              item.pay_time_limit--
            }
          });
        }, 1000);
        if (res.retRes.length == 0) {
          this.nothingShow = true;
        }else{
          this.nothingShow = false;
        }
      });
    },
    //选择订单状态
    chosetoZt(status) {
      this.status = status;
      this.tapRadio = status;
      this.currentPage = 1
      this.page = 1
      this.getOrderLists();
    },
    //删除选中订单
    cancelOrder(id) {
      delete_orders({
        md5key: localStorage.getItem("md5key"),
        id:id
      }).then(res=>{
        if(res.retInt == 1){
          clearInterval(this.acDjsTimer);
          this.acDjsTimer = null;
          this.getOrderLists();
        }else{
          this.$message(res.retErr)
        }
      })
    },
    type(type) {
      if (type == 1) {
        return "待支付";
      } else if (type == 2) {
        return "待发货";
      } else if (type == 3) {
        return "待收货";
      } else if (type == 4) {
        return "已取消";
      } else if (type == 5) {
        return "已完成";
      } else if (type == 6) {
        return "退款中";
      } else if (type == 7) {
        return "已退款";
      }
    },
    //兑换码解锁
    jsmJs() {
      console.log(this.jsm);
      if (!this.jsm) {
        this.$message({
          message: "请输入正确的兑换码！",
          type: "warning",
        });
      } else {
        sy_goodsjsm({
          md5key: localStorage.getItem("md5key"),
          numbers: this.jsm,
        }).then((res) => {
          if (res.retInt == 1) {
            this.$message.success("解锁成功！");
            this.reload();
          } else {
            this.$message({
              message: res.retErr,
              type: "warning",
            });
          }
        });
      }
    },
    //关闭兑换码弹窗
    duihuanClose() {
      this.dialogVisible_duihuan = false;
    },
    //关闭支付弹窗
    zhifuClose() {
      console.log(this.zfTimer)
      clearInterval(this.zfTimer)
      this.zfTimer = null
      this.zfTimer = ''
      
      this.dialogVisible_zhifu = false;
      
    },
    //全选订单
    choseAllOrder() {
      this.choseList = [];
      this.orderLists.forEach((item) => {
        this.choseList.push(item.id);
      });
      this.choseAll = true;
    },
    //取消全选订单
    choseNoOrder() {
      this.choseList = [];
      this.choseAll = false;
    },
    //单选订单
    choseOrder(id) {
      if (this.choseList.indexOf(id) == -1) {
        this.choseList.push(id);
      } else {
        this.choseList.splice(this.choseList.indexOf(id), 1);
      }
      if (this.choseList.length == this.orderLists.length) {
        this.choseAll = true;
      } else {
        this.choseAll = false;
      }
      console.log(this.choseList);
    },
    //分页
    handleSizeChange(val) {
      this.page_size = val;
      this.currentPage = 1;
        this.getOrderLists();
    },
    handleCurrentChange(val) {
      this.page = val;
      //获取我的活动列表数据
        this.getOrderLists();
    },
    //前往订单详情页
    godetails(id,info_title) {
      this.$router.push({
        name: "orderDetails",
        query: {
          id: id,
          info_title:info_title
        },
      });
    },
    //前往订单详情开票
    godetailskp(id) {
      // console.log(id)
      this.getOrderInfo(id);
      // this.$router.push({
      //   name: "orderDetails",
      //   query: {
      //     id: id,
      //     kp:'kp',
      //   },
      // });
    },
    //去学习
    gostudy(goods_id,title) {
      info_goods({
        md5key: localStorage.getItem("md5key"),
        id:goods_id,
      }).then((res) => {
        console.log(res, "商品详情");
        this.$router.push({
          name: "Dingzhi",
          query: {
            id: goods_id,
            kemu_id:res.retRes.kemu_id,
            type:'xx',
            goodsyf_title:title
          },
        });
      });
    },
    //回到创建订单未支付的服务包支付页并回填信息
    goyuyue(goods_id,is_all_gm,week_ids,status) {
      info_goods({
        md5key: localStorage.getItem("md5key"),
        id: goods_id,
      }).then((res) => {
        console.log(res, "商品详情");
        this.$router.push({
          name: "Dingzhi",
          query: {
            id: goods_id,
            kemu_id:res.retRes.kemu_id,
            type:'dy',
            isall:is_all_gm==0?2:1,
            week_ids:is_all_gm== 1?'':week_ids,
            status:status,
            gopay:1,
          },
        });
      });
    },
    //去支付
    payIt(id){
      orderspay({
        md5key: localStorage.getItem("md5key"),
        id:id,
        type:'qrcode'
      }).then(res=>{
        const that = this
        if(res.retInt == 1){
          this.zfevm = this.$globalUrl + res.retRes.ewm_file_url
          // this.zfevm = this.$globalUrl+res.retRes.ewm_file_url
          this.dialogVisible_zhifu = true
        }
        this.zfTimer = setInterval(()=>{
          info_orders({
            md5key: localStorage.getItem("md5key"),
            id: id,
          }).then((res)=>{
              console.log(res)
              if(res.retRes.status != 1){
                clearInterval(that.zfTimer)
                that.zfTimer = null
                
                that.dialogVisible_zhifu = false
                that.getOrderLists();
              }
          })
        },3000)
      })
      // getxcxewm({
      //       md5key: localStorage.getItem("md5key"),
      //       // scene: "orderId=" + id,
      //       // scene:"orderId="+encodeURIComponent(id),
      //       scene:"orderId="+encodeURIComponent(id),
      //       page: "page_resource/pages/orderPay/orderPay",
      //       env_version: "trial",
      //     }).then((res) => {
      //       const that = this
      //       console.log(res);
      //       // this.zfevm = "https://jypt.webtest.ibei360.cn"+res.retRes.file_url
      //       this.zfevm = "https://jypt.idianjiao.com"+res.retRes.file_url
      //       this.dialogVisible_zhifu = true
      //       console.log(this.zfTimer)
      //       this.zfTimer = setInterval(()=>{
      //         info_orders({
      //           md5key: localStorage.getItem("md5key"),
      //           id: id,
      //         }).then((res)=>{
      //             console.log(res)
      //             if(res.retRes.status != 1){
      //               clearInterval(that.zfTimer)
      //               that.zfTimer = null
                    
      //               that.dialogVisible_zhifu = false
      //               that.getOrderLists();
      //             }
      //         })
      //       },3000)
      //     });
    },
    //获取订单详情
    getOrderInfo(id) {
      info_orders({
        md5key: localStorage.getItem("md5key"),
        id: id,
      }).then((res) => {
        console.log(res);
        const data = res.retRes;
        this.id = data.id;
        this.title = data.lists[0].goods_title;
        this.numbers = data.numbers;
        this.create_time = data.create_time;
        this.js_nums = data.js_nums;
        this.pay_price = data.pay_price;
        this.pay_time = data.pay_time;
        this.status = data.status;
        this.jsm_lists = data.jsm_lists;
        this.kt_account = data.kt_account;
        console.log(this.title);
        this.kaipiaoShow = true
      });
    },
    //提交申请
    submit() {
      //个人开票
      if (this.title_type == 1) {
        if (!this.sfzh) {
          this.$message({
            message: "请填写个人身份证号",
            duration: 1000,
            showClose: false,
          });
        } else if (!this.phone) {
          this.$message({
            message: "请填写联系方式",
            duration: 1000,
            showClose: false,
          });
        } else {
          //电子发票
          if (this.kptype == 1) {
            if (!this.email) {
              this.$message({
                message: "请填写邮箱地址",
                duration: 1000,
                showClose: false,
              });
            }else{
                this.kaipiao();
            }
          } else {//纸质发票
            if (!this.address) {
              this.$message({
                message: "请填写收货地址",
                duration: 1000,
                showClose: false,
              });
            } else if (!this.name) {
              this.$message({
                message: "请填写收货人名称",
                duration: 1000,
                showClose: false,
              });
            }else{
                this.kaipiao();
            }
          }
        }
      }else{//单位开票
        if (!this.kptitle) {
          this.$message({
            message: "请填写抬头内容",
            duration: 1000,
            showClose: false,
          });
        } else if (!this.taxnumber) {
          this.$message({
            message: "请填写公司税号",
            duration: 1000,
            showClose: false,
          });
        }else if (!this.phone) {
          this.$message({
            message: "请填写联系方式",
            duration: 1000,
            showClose: false,
          });
        } else {
          //电子发票
          if (this.kptype == 1) {
            if (!this.email) {
              this.$message({
                message: "请填写邮箱地址",
                duration: 1000,
                showClose: false,
              });
            }else{
                this.kaipiao();
            }
          } else {//纸质发票
            if (!this.address) {
              this.$message({
                message: "请填写收货地址",
                duration: 1000,
                showClose: false,
              });
            } else if (!this.name) {
              this.$message({
                message: "请填写收货人名称",
                duration: 1000,
                showClose: false,
              });
            }else{
                this.kaipiao();
            }
          }
        }
      }
    },
    //提交
    kaipiao(){
      console.log(this.id,this.kptype,
      this.title_type,this.kptitle,
      this.taxnumber,this.name,this.phone,this.email,this.address)
      askordersfp({
        md5key: localStorage.getItem("md5key"),
        orders_id:this.id,
        type:this.kptype,
        contents:'课程',
        title_type:this.title_type,
        title:this.kptitle,
        taxnumber:this.title_type == 1?this.sfzh:this.taxnumber,
        name:this.name,
        phone:this.phone,
        email:this.email,
        address:this.address
      }).then(res=>{
        console.log(res)
        if(res.retInt == 1){
          this.kaipiaoShow =false
        }
      })
    },
  },
};
</script>
<style>
/* 用于分页 */
.el-select-dropdown__item.selected {
  color: #08a579 !important;
}
.el-pagination__editor.el-input .el-input__inner {
  border-color: #ccc;
}
.page1 {
  width: 740px;
  margin: 0 auto;
  margin-top: 40px;
}
.el-pagination {
  text-align: center;
  /* margin: 20px 80px 20px 0; */
}
.el-select .el-input.is-focus .el-input__inner {
  border-color: #08a579 !important;
}
.el-pagination .el-select .el-input .el-input__inner:hover {
  border-color: #08a579 !important;
}
.el-select .el-input__inner:focus {
  border-color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  color: #fff;
}
.el-pager li:hover {
  color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  color: #fff !important;
}
.el-button--primary {
  background-color: #08a579;
  border-color: #08a579;
}
</style>
<style lang="less" scoped>
#container {
  .content {
    position: relative;
    .nothing {
      margin-top: 100px;
      text-align: center;
      img {
        // width: 400px;
      }
    }
    /deep/.el-dialog {
      border-radius: 20px;
      overflow: hidden;
    }
    /deep/.el-dialog__headerbtn .el-dialog__close {
      margin-right: 10px;
      color: #c0c1c5;
      font-size: 18px;
      font-weight: 600;
    }
    /deep/.el-dialog__headerbtn {
      right: 36px;
    }
    .top {
      display: flex;
      margin: 30px 0px 40px 30px;
      span {
        display: inline-block;
        position: relative;
        top: 5px;
        margin-right: 10px;
        width: 3px;
        height: 20px;
        background: #08a579;
        border-radius: 2px;
      }
      h3 {
        font-size: 20px;
      }
    }
    .duihuan {
      position: absolute;
      top: 20px;
      right: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 134px;
      height: 40px;
      background: #08a579;
      border-radius: 20px;
      cursor: pointer;
      img {
        position: relative;
        top: 1px;
        width: 16px;
      }
      p {
        margin-left: 5px;
        font-size: 14px;
        color: #fff;
      }
    }
    .duihuanBox {
      /deep/.el-dialog__body {
        padding: 0 20px;
      }
      /deep/.el-dialog__header {
        padding-top: 10px;
      }
      h2 {
        margin-bottom: 40px;
        text-align: center;
        font-size: 18px;
        color: #333;
      }
      .shuru {
        margin: 0 auto;
        margin-bottom: 40px;
        width: 280px;
        height: 54px;
        border: 1px solid #cccccc;
        border-radius: 4px;
        input {
          width: 270px;
          height: 52px;
          font-size: 14px;
          text-align: center;
          border: 0;
          outline: none;
        }
      }
      .sureJs {
        margin-left: 100px;
        margin-bottom: 38px;
        text-align: center;
        line-height: 40px;
        color: #fff;
        font-size: 14px;
        width: 120px;
        height: 40px;
        background: #08a579;
        border-radius: 4px;
        cursor: pointer;
      }
    }
    .duihuanBoxzf {
      text-align: center;
      /deep/.el-dialog__body {
        padding: 0 20px;
      }
      /deep/.el-dialog__header {
        padding-top: 10px;
      }
      h2 {
        margin-bottom: 40px;
        text-align: center;
        font-size: 18px;
        color: #333;
      }
      img{
        margin-bottom: 20px;
        width: 180px;
      }
    }
    .box {
      margin-left: 0px;
      .taps {
        position: relative;
        display: flex;
        align-items: center;
        margin-left: 30px;
        height: 38px;
        border-bottom: 1px solid #e6e6e6;
        overflow: hidden;
        .all {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-left: 20px;
          cursor: pointer;
          h3 {
            padding-bottom: 10px;
            color: #939599;
            font-size: 14px;
          }
          span {
            display: inline-block;
            width: 32px;
            height: 3px;
            border-radius: 10px;
          }
        }
        .fenge {
          margin-left: 45px;
          margin-bottom: 10px;
          width: 1px;
          height: 16px;
          background: #e1e2e6;
        }
        .waitMoney,
        .finish {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 0 0px 0px 53px;
          cursor: pointer;
          h3 {
            padding-bottom: 10px;
            color: #939599;
            font-size: 14px;
          }
          span {
            display: inline-block;
            width: 32px;
            height: 3px;
            border-radius: 10px;
          }
        }
        //活动样式
        .choseTap {
          h3 {
            font-size: 16px;
            color: #333;
          }
          span {
            background: #08a579;
          }
        }
        .search {
          position: relative;
          position: absolute;
          top: 0px;
          right: 30px;
          input {
            padding-left: 30px;
            width: 170px;
            height: 30px;
            background: #ffffff;
            border: 1px solid #c4c7cc;
            border-radius: 16px;
            outline: none;
          }
          i {
            position: absolute;
            top: 7px;
            left: 10px;
            font-size: 18px;
            color: #c4c7cc;
          }
        }
      }
      .orderLists {
        margin-left: 30px;
        .caozuo {
          display: flex;
          align-items: center;
          padding: 20px 0;
          font-size: 12px;
          color: #999;
          border-bottom: 1px solid #e6e6e6;
          .duoxuan {
            display: flex;
            align-items: center;
            margin-left: 20px;
            span {
              position: relative;
              display: inline-block;
              margin-right: 5px;
              width: 16px;
              height: 16px;
              // border: 1px solid #999999;
              // border-radius: 4px;
              cursor: pointer;
              img {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
                width: 16px;
              }
            }
          }
          .cancelsc {
            display: flex;
            align-items: center;
            // justify-content: space-around;
            margin-left: 30px;
            width: 88px;
            height: 28px;
            border: 1px solid #999999;
            border-radius: 2px;
            cursor: pointer;
            i {
              margin-left: 10px;
              margin-right: 4px;
              font-size: 18px;
            }
          }
        }
        .orderBox {
          margin-top: 20px;
          .boxtop {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 840px;
            height: 48px;
            background: #f0f2f5;
            border: 1px solid #e6e6e6;
            border-radius: 4px 4px 0px 0px;
            .left {
              display: flex;
              align-items: center;
              margin-left: 20px;
              .danxuan {
                span {
                  position: relative;
                  display: inline-block;
                  margin-right: 12px;
                  width: 16px;
                  height: 16px;
                  // border: 1px solid #999999;
                  // border-radius: 4px;
                  cursor: pointer;
                  img { 
                    position: relative;
                    top: 2px;
                    width: 16px;
                  }
                }
              }
              h3 {
                margin-right: 17px;
                font-size: 16px;
                color: #333;
                font-weight: normal;
              }
              span {
                font-size: 14px;
                color: #646566;
              }
            }
            .right {
              margin-right: 20px;
              cursor: pointer;
              img {
                width: 16px;
              }
            }
          }
          .orderDetails {
            display: flex;
            align-items: center;
            // justify-content: space-between;
            width: 840px;
            border: 1px solid #e6e6e6;
            border-radius: 0px 0px 4px 4px;
            border-top: none;
            .pic {
              margin: 12px 20px;
              width: 80px;
              height: 80px;
              background: #d3d6de;
              cursor: pointer;
              img {
                width: 100%;
                max-height: 100%;
              }
            }
            .title {
              position: relative;
              display: flex;
              flex-direction: column;
              position: relative;
              margin-left: 15px;
              width: 130px;
              // height: 80px;
              // white-space: nowrap;
              // overflow: hidden;
              font-size: 14px;
              font-weight: bold;
              cursor: pointer;
              p {
                margin: 0;
                margin-bottom: 4px;
                width: 130px;
                white-space: nowrap;
                overflow: hidden;
                color: #333;
                text-overflow: ellipsis;
              }
              span{
                font-weight: normal;
                cursor: pointer;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;  // 控制多行的行数
                -webkit-box-orient: vertical;
                color: #666;
                font-size: 12px;
              }
              .zengpin {
                // position: absolute;
                // left: 0;
                // bottom: 4px;
                margin-top: 5px;
                color: #999;
                font-size: 12px;
                font-weight: normal;
              }
            }
            .title:hover{
              p{
                color: #08a579;
              }
            }
            .money {
              margin-left: 75px;
              width: 80px;
              font-size: 14px;
              color: #f5434d;
            }
            .zhuangtai {
              margin-left: 40px;
              font-size: 14px;
              color: #646566;
            }
            .xqkp {
              margin-left: 50px;
              font-size: 14px;
              color: #07a579;
              cursor: pointer;
              user-select: none;
            }
            .xqkp:hover {
              color: #08a579;
            }
            .dosome {
              display: flex;
              position: relative;
              .gostudy {
                margin-left: 66px;
                text-align: center;
                line-height: 28px;
                width: 80px;
                height: 28px;
                font-size: 14px;
                color: #fff;
                background: #08a579;
                border-radius: 14px;
                cursor: pointer;
                background-color: #fff;
                color: #07a579;
                // border: 1px solid #e5e5e5;
                user-select: none;
              }
              .gostudy:active{
                opacity: 0.8;
              }
              .zhifu {
                color: #fff;
                background: #08a579;
              }
              .zftime {
                position: absolute;
                left: 24px;
                top: 40px;
                color: #07A579;
                font-size: 12px;
                font-weight: normal;
                user-select: none;
              }
            }
          }
        }
      }
      .page1 {
        width: 700px;
        margin: 0 auto;
      }
      .el-pagination {
        text-align: center;
        margin: 20px 80px 20px 0;
      }
    }
    .kpBox {
      overflow: hidden;
      /deep/.el-dialog {
        overflow: hidden;
        border-radius: 20px;
      }
      /deep/.el-dialog__header {
        padding: 0;
      }
      /deep/.el-dialog__body {
        padding: 0;
      }
      /deep/.el-dialog__headerbtn .el-dialog__close {
        color: #c0c1c5;
        font-weight: bold;
      }
      h2 {
        margin: 30px auto;
        margin-bottom: 40px;
        text-align: center;
        font-size: 18px;
        color: #333;
      }
      .kpContent {
        margin: 0 auto;
        margin-bottom: 15px;
        width: 440px;
        border: 1px solid #e6e6e6;
        font-size: 14px;
        color: #646566;
        .type {
          display: flex;
          align-items: center;
          line-height: 44px;
          border-bottom: 1px solid #e6e6e6;
          .left {
            margin-left: 28px;
            width: 176px;
            border-right: 1px solid #e6e6e6;
          }
          .right {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-left: 28px;
            .type1 {
              display: flex;
              align-items: center;
              margin-right: 20px;
              color: #646566;
              img {
                margin-right: 5px;
                width: 14px;
                height: 14px;
                cursor: pointer;
              }
            }
            input {
              width: 200px;
              height: 30px;
              font-size: 14px;
              border: 0;
              outline: none;
            }
          }
        }
        .type:last-of-type {
          border: 0;
        }
      }
      .tips {
        margin-bottom: 20px;
        margin-left: 50px;
        font-size: 12px;
        color: #969699;
        span {
          color: #f6444e;
        }
      }
      .submit {
        margin: 0 auto;
        margin-bottom: 40px;
        line-height: 40px;
        text-align: center;
        width: 120px;
        height: 40px;
        color: #fff;
        font-size: 14px;
        background: #08a579;
        border-radius: 4px;
        cursor: pointer;
        user-select: none;
      }
      .submit:active {
        opacity: 0.8;
      }
    }
  }
}
</style>